<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>{$project}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="__PACKAGE__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__PACKAGE__/layuiadmin/style/admin.css">
    <link rel="stylesheet" href="__CSS__/index.css">
</head>

<body>
    <div class="layui-container">

        <div class="header">
            <div class="index" admin-event="url" url="{:url('/')}">首页</div>
            <div class="title">{$project}</div>
            <div class="logout" admin-event="get" url="{:url('logout')}">退出登录</div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">选择日期</label>
            <div class="layui-input-inline">
                <input type="text" value="{$date}" class="layui-input date">
            </div>
        </div>

        <div class="layui-fluid">

            <!-- 概览分析 -->
            <div class="layui-row layui-col-space15 frame">

                <blockquote class="layui-elem-quote overview-title">概览分析</blockquote>

                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <center>请求数</center>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <center>
                                <p class="layuiadmin-big-font">
                                    {$totalStatistic.count}
                                </p>
                            </center>
                        </div>
                    </div>
                </div>

                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <center>平均响应时间</center>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <center>
                                <p class="layuiadmin-big-font">
                                    {$totalStatistic.averageCost}ms
                                </p>
                            </center>
                        </div>
                    </div>
                </div>

                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <center>成功数</center>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <center>
                                <p class="layuiadmin-big-font">
                                    {$totalStatistic.successCount}
                                </p>
                            </center>
                        </div>
                    </div>
                </div>

                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <center>异常数</center>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <center>
                                <p class="layuiadmin-big-font">
                                    {$totalStatistic.errorCount}
                                </p>
                            </center>
                        </div>
                    </div>
                </div>

            </div>

            <div class="line"></div>

            <!-- 统计分析 -->
            <div class="layui-row frame">

                <blockquote class="layui-elem-quote">统计分析</blockquote>

                <div class="layui-row layui-col-space10">
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div id="count" style="width: 100%;height: 250px;"></div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div id="averageCost" style="width: 100%;height: 250px;"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-row layui-col-space10">
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div id="successCount" style="width: 100%;height: 250px;"></div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div id="errorCount" style="width: 100%;height: 250px;"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>


            <!-- 调用入口 -->
            <div class="layui-row frame">

                <blockquote class="layui-elem-quote">调用入口</blockquote>

                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md3">
                        <div class="layui-panel" style="height: 500px; overflow: hidden auto;">
                            <ul class="layui-menu" id="projectTransfer">
                                {foreach name='projectTransfer' item="transfer" key="key"}
                                <li lay-options="{id: {$key}}" transfer="{$transfer}">
                                    <div class=" layui-menu-body-title">
                                        {$transfer}
                                    </div>
                                </li>
                                <li class="layui-menu-item-divider"></li>
                                {/foreach}
                            </ul>
                        </div>
                    </div>

                    <div class="layui-col-md9">
                        <div style="width: 100%;height: 500px;" id="transferIframe">
                        </div>
                    </div>
                </div>

            </div>


            <!-- 调用IP -->
            <div class="layui-row frame">

                <blockquote class="layui-elem-quote">调用IP</blockquote>

                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md3">
                        <div class="layui-panel" style="height: 500px; overflow: hidden auto;">
                            <ul class="layui-menu" id="projectIp">
                                {foreach name='projectIp' item="ip" key="key"}
                                <li lay-options="{id: {$key}}" ip="{$ip}">
                                    <div class=" layui-menu-body-title">
                                        {$ip}
                                    </div>
                                </li>
                                <li class="layui-menu-item-divider"></li>
                                {/foreach}
                            </ul>
                        </div>
                    </div>

                    <div class="layui-col-md9">
                        <div style="width: 100%;height: 500px;" id="ipIframe">
                        </div>
                    </div>
                </div>

            </div>


            <!-- 状态码 -->
            <div class="layui-row frame">

                <blockquote class="layui-elem-quote">状态码</blockquote>

                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md3">
                        <div class="layui-panel" style="height: 500px; overflow: hidden auto;">
                            <ul class="layui-menu" id="projectCode">
                                {foreach name='projectCode' item="code" key="key"}
                                <li lay-options="{id: {$key}}" code="{$code}">
                                    <div class=" layui-menu-body-title">
                                        {$code}
                                    </div>
                                </li>
                                <li class="layui-menu-item-divider"></li>
                                {/foreach}
                            </ul>
                        </div>
                    </div>

                    <div class="layui-col-md9">
                        <div style="width: 100%;height: 500px;" id="codeIframe">
                        </div>
                    </div>
                </div>

            </div>


            <!-- 调用记录 -->
            <div class="layui-row frame">

                <blockquote class="layui-elem-quote">调用记录</blockquote>

                <table id="tracingList" lay-filter="tracingList"></table>

            </div>

        </div>
    </div>
</body>

</html>
<!--JS引用-->
<script src="__JS__/jquery.min.js"></script>
<script src="__PACKAGE__/layui/layui.js"></script>
<script src="__JS__/index.js"></script>
<script src="__JS__/echarts.min.js"></script>
<script>
    // 日期选择
    laydate.render({
        elem: ".date",
        type: 'date',
        trigger: 'click',
        format: 'yyyy-MM-dd',
        done: function (value, date, endDate) {
            window.location.href = "{:url('/project',['project'=>$project])}&date=" + value;
        }
    })

    // 固定块
    util.fixbar({
        top: true,
        css: { bottom: 50 },
    });

    $(function () {
        countObject = echarts.init(document.getElementById('count'));
        averageCostObject = echarts.init(document.getElementById('averageCost'));
        successCountObject = echarts.init(document.getElementById('successCount'));
        errorCountObject = echarts.init(document.getElementById('errorCount'));

        chartList = eval("(" + `{$chartList}` + ")");

        statistics('请求数', chartList.time, chartList.count, 'rgb(126,211,244)', countObject);
        statistics('响应时间', chartList.time, chartList.averageCost, 'rgb(250,200,88)', averageCostObject);
        statistics('成功数', chartList.time, chartList.successCount, 'rgb(145,204,117)', successCountObject);
        statistics('异常数', chartList.time, chartList.errorCount, 'rgb(255,112,112)', errorCountObject);
    });

    function statistics(title, x, y, color, object) {
        var option = {
            title: {
                text: title,
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                confine: true,
                position: function (point, params, dom, rect, size) {
                    return [point[0], '10%'];
                },
                extraCssText: 'width:150px;'
            },
            dataZoom: [{
                type: 'slider',
                height: 25
            }],
            grid: {
                top: '15%',
                left: '3%',
                right: '4%',
                bottom: '20%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: x
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: title,
                    data: y,
                    type: 'line',
                    smooth: true,
                    color: color,
                }
            ]
        };

        object.setOption(option);
    }

    // 调用入口
    dropdown.on('click(projectTransfer)', function (options) {
        var transfer = $(this).attr('transfer');
        var url = "{:url('/project_transfer',['project'=>$project,'date'=>$date])}&transfer=" + transfer;

        $("#transferIframe").html(`<iframe src="` + url + `" width="100%" height="100%" style="border: none;"></iframe>`);
    });

    // 调用IP
    dropdown.on('click(projectIp)', function (options) {
        var ip = $(this).attr('ip');
        var url = "{:url('/project_ip',['project'=>$project,'date'=>$date])}&ip=" + ip;

        $("#ipIframe").html(`<iframe src="` + url + `" width="100%" height="100%" style="border: none;"></iframe>`);
    });

    // 状态码
    dropdown.on('click(projectCode)', function (options) {
        var code = $(this).attr('code');
        var url = "{:url('/project_code',['project'=>$project,'date'=>$date])}&code=" + code;

        $("#codeIframe").html(`<iframe src="` + url + `" width="100%" height="100%" style="border: none;"></iframe>`);
    });

    // 调用记录
    table.render({
        elem: '#tracingList',
        even: true,
        height: 500,
        loading: true,
        url: "{:url('/project_tracing_list',['project'=>$project,'date'=>$date])}",
        method: 'POST',
        page: true,
        limit: 10,
        parseData: function (params) {
            return {
                "code": params.code,
                "msg": params.msg,
                "count": params.data.total,
                "data": params.data.tracingList
            };
        },
        request: {
            pageName: 'page',
            limitName: 'limit'
        },
        response: {
            statusCode: 200
        },
        cols: [[
            { field: 'time', title: '调用时间', width: 160 },
            { field: 'transfer', title: '调用入口', minWidth: 320 },
            { field: 'ip', title: 'IP', width: 150 },
            { field: 'costTime', title: '耗时', width: 150, templet: '#costTime' },
            { field: 'success', title: '状态', width: 60, templet: '#success' },
            { field: 'trace', title: 'trace', width: 130, templet: '#trace' }
        ]]
    });

    // 查看详情
    $('body').on('click', '.details', function () {
        var details = $(this).attr('details');

        top.layer.open({
            type: 1,
            title: false,
            anim: 5,
            scrollbar: false,
            resize: false,
            move: false,
            offset: 'auto',
            area: ['80%', '80%'],
            skin: 'open-skin',
            content: `<pre class="layui-code" lay-title="详细信息" lay-skin="notepad">` + details + `</pre>`,
            success: function (layero, index) {
                top.layui.code({
                    elem: 'pre'
                });
            }
        });
    });
</script>
<script type="text/html" id="success">
    {{#  if(d.success === 1){ }}
    <i class="layui-icon layui-icon-circle-dot" style="font-size: 20px; color: #7ecf51;"></i>
    {{#  } else { }}
    <i class="layui-icon layui-icon-circle-dot" style="font-size: 20px; color: #e16757;"></i>
    {{#  } }}
</script>
<script type="text/html" id="costTime">
    {{d.costTime}}ms
</script>
<script type="text/html" id="trace">
    <a href="javascript:;" style="color: #0066cc;" class="details" details='{{d.details}}'>{{d.trace}}</a>
</script>